<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>薪酬福利</el-breadcrumb-item>
            <el-breadcrumb-item>五险一金</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入员工姓名" clearable v-model="name" @clear="searchScurity">
                        <el-button slot="append" icon="el-icon-search" @click="searchScurity"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加社保</el-button>
                </el-col>
            </el-row>
            <el-table :data="securityList" border stripe>

                <af-table-column  label="ID"  prop="sId"></af-table-column>
                <af-table-column  label="员工工号"  prop="empCode"></af-table-column>
                <af-table-column  label="部门"   prop="deptId">
                    <template slot-scope="scope" >
                        <span v-for="d in deptList" v-if="scope.row.deptId==d.id"  >{{d.dname}}</span>
                    </template>
                </af-table-column>
                <af-table-column label="职位" prop="pId">
                    <template slot-scope="scope" >
                        <span v-for="j in jobList" v-if="scope.row.pId==j.id"  >{{j.pname}}</span>
                    </template>
                </af-table-column>

                <af-table-column label="员工姓名" prop="uname"></af-table-column>
                <af-table-column label="五险一金地址"  width="300" prop="address"></af-table-column>
                <af-table-column label="养老保险" prop="endowmentInsurance"></af-table-column>
                <af-table-column label="医疗保险" prop="medicalInsurance"></af-table-column>
                <af-table-column label="失业保险" prop="unemploymentInsurance"></af-table-column>
                <af-table-column label="工伤保险" prop="injuryInsurance"></af-table-column>
                <af-table-column label="生育保险" prop="birthInsurance"></af-table-column>
                <af-table-column label="住房公积金" prop="accumulationFund"></af-table-column>
                <af-table-column label="备注" prop="note"></af-table-column>
                <af-table-column fixed="right" width="200" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removeById(scope.row.sId)">删除</el-button>
                    </template>
                </af-table-column>


            </el-table>

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 4 , 8, 16]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--{{securityList}}-->
        <!--{{empList}}-->
        <!--<br>-->

        <!--{{jobList}}-->

        <!--添加-->
        <el-dialog title="添加社保" :visible.sync="addDialogVisible" width="50%">
            <el-form
                    :model="addForm"
                    :rules="addFormRules"
                    ref="addFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >

                <el-form-item label="部门:" prop="deptId">
                    <el-select v-model="addForm.deptId" placeholder="请选择">
                        <el-option v-for="d in deptList" :label="d.dname" :value="d.id"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="职位:" prop="pId">
                    <el-select v-model="addForm.pId"  placeholder="职位">
                        <el-option :label="item.pname" :value="item.id" v-for="item in jobList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="员工姓名" prop="uname">
                    <el-input v-model="addForm.uname"></el-input>
                </el-form-item>


                <el-form-item label="五险一金地址" prop="address">
                    <el-input v-model="addForm.address"></el-input>
                </el-form-item>
                <el-form-item label="养老保险" prop="endowmentInsurance" >
                    <el-select v-model="addForm.endowmentInsurance"  placeholder="请选择">
                        <el-option label="7%" value="0.07"></el-option>
                        <el-option label="8%" value="0.08"></el-option>
                        <el-option label="9%" value="0.09"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="医疗保险" prop="medicalInsurance">
                    <el-select v-model="addForm.medicalInsurance"placeholder="请选择">
                        <el-option label="1%" value="0.01"></el-option>
                        <el-option label="2%" value="0.02"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="失业保险" prop="unemploymentInsurance">
                    <el-select v-model="addForm.unemploymentInsurance"placeholder="请选择">
                        <el-option label="0.2%" value="0.002"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="工伤保险" prop="injuryInsurance">
                    <el-select v-model="addForm.injuryInsurance"placeholder="请选择">
                        <el-option label="1%" value="0.1"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="生育保险" prop="birthInsurance">
                    <el-select v-model="addForm.birthInsurance"placeholder="请选择">
                        <el-option label="1%" value="0.1"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="住房公积金" prop="accumulationFund">
                    <el-select v-model="addForm.accumulationFund" placeholder="请选择">
                        <el-option label="6%" value="0.06"></el-option>
                        <el-option label="7%" value="0.07"></el-option>
                        <el-option label="8%" value="0.08"></el-option>
                        <el-option label="9%" value="0.09"></el-option>
                        <el-option label="10%" value="0.1"></el-option>
                        <el-option label="11%" value="0.11"></el-option>
                        <el-option label="12%" value="0.12"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="note">
                    <el-input v-model="addForm.note"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addSecurity">确 定</el-button>
                <el-button @click="canceladd">取 消</el-button>
            </span>
        </el-dialog>

        <!--修改-->
        <el-dialog title="添加社保" :visible.sync="editDialogVisible" width="50%">
            <el-form
                    :model="editForm"
                    :rules="editFormRules"
                    ref="editFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >

                <el-form-item label="部门:" prop="deptId">
                    <el-select v-model="editForm.deptId" placeholder="请选择">
                        <el-option v-for="d in deptList" :label="d.dname" :value="d.id"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="职位:" prop="pId">
                    <el-select v-model="editForm.pId"  placeholder="职位">
                        <el-option :label="item.pname" :value="item.id" v-for="item in jobList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="id" hidden prop="sId">
                    <el-input v-model="editForm.sId"></el-input>
                </el-form-item>


                <el-form-item label="员工姓名" prop="uname">
                    <el-input v-model="editForm.uname"></el-input>
                </el-form-item>


                <el-form-item label="五险一金地址" prop="address">
                    <el-input v-model="editForm.address"></el-input>
                </el-form-item>
                <el-form-item label="养老保险" prop="endowmentInsurance" >
                    <el-select v-model="editForm.endowmentInsurance"  placeholder="请选择">
                        <el-option label="7%" value="0.07"></el-option>
                        <el-option label="8%" value="0.08"></el-option>
                        <el-option label="9%" value="0.09"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="医疗保险" prop="medicalInsurance">
                    <el-select v-model="editForm.medicalInsurance"placeholder="请选择">
                        <el-option label="1%" value="0.01"></el-option>
                        <el-option label="2%" value="0.02"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="失业保险" prop="unemploymentInsurance">
                    <el-select v-model="editForm.unemploymentInsurance"placeholder="请选择">
                        <el-option label="0.2%" value="0.002"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="工伤保险" prop="injuryInsurance">
                    <el-select v-model="editForm.injuryInsurance"placeholder="请选择">
                        <el-option label="1%" value="0.1"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="生育保险" prop="birthInsurance">
                    <el-select v-model="editForm.birthInsurance"placeholder="请选择">
                        <el-option label="1%" value="0.1"></el-option>

                    </el-select>
                </el-form-item>



                <el-form-item label="住房公积金" prop="accumulationFund">
                    <el-select v-model="editForm.accumulationFund" placeholder="请选择">
                        <el-option label="6%" value="0.06"></el-option>
                        <el-option label="7%" value="0.07"></el-option>
                        <el-option label="8%" value="0.08"></el-option>
                        <el-option label="9%" value="0.09"></el-option>
                        <el-option label="10%" value="0.1"></el-option>
                        <el-option label="11%" value="0.11"></el-option>
                        <el-option label="12%" value="0.12"></el-option>

                    </el-select>
                </el-form-item>



                <el-form-item label="备注" prop="note">
                    <el-input v-model="editForm.note"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editSecurity">确 定</el-button>
                <el-button @click="cancelEdit">取 消</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "Security",
        data(){
            return{
                editFormRules:{

                },

                editForm:{
                    deptId:[],
                    pId:[],
                   sId:-1,
                    id:-1,
                    uname:'',
                    address:'',
                    endowmentInsurance:'',
                    medicalInsurance:'',
                    unemploymentInsurance:'',
                    injuryInsurance:'',
                    birthInsurance:'',
                    accumulationFund:'',
                    note:'',
                },
                editDialogVisible:false,
                addFormRules:{

                },
                empList:[],
                addForm:{
                    uname:'',
                    address:'',
                    endowmentInsurance:'',
                    medicalInsurance:'',
                    unemploymentInsurance:'',
                    injuryInsurance:'',
                    birthInsurance:'',
                    accumulationFund:'',
                    note:'',
                },
                addDialogVisible:false,
                jobList:[],
                deptList:[],
                pageNum: 1,
                pageSize: 2,
                name: "",
               securityList: [],
                total: 0,
            }
        },
        methods:{
            editFormClose() {
                this.$refs.editFormRef.resetFields();
            },
            // 修改
            editSecurity() {
                this.$refs.editFormRef.validate(valid=>{
                    if (valid){
                        let url = this.$HRMSUrl+"/security/modify"
                        this.$axios.put(url,this.editForm)
                            .then(res=>{
                                if (res.data.code == 200){
                                    this.getSecurityList();
                                    this.editDialogVisible = false ;
                                }else {
                                    this.$message({
                                        type:"error",
                                        message:res.data.msg,
                                        duration:1000
                                    })
                                }
                            })
                    }else {
                        return false
                    }
                })
            },

            cancelEdit(){
                this.$refs.editFormRef.resetFields();
                //this.editRoleForm={};
                this.editDialogVisible = false;
            },
            //反显数据
            showDialog(row){
                this.editDialogVisible=true;
                this.editForm.deptId=row.deptId;
                this.editForm.sId=row.sId;
                this.editForm.pId=row.pId;
                this.editForm.uname=row.uname;
                this.editForm.address=row.address;
                this.editForm.endowmentInsurance=row.endowmentInsurance;
                this.editForm.medicalInsurance=row.medicalInsurance;
                this.editForm.unemploymentInsurance=row.unemploymentInsurance;
                this.editForm.injuryInsurance=row.injuryInsurance;
                this.editForm.birthInsurance=row.birthInsurance;
                this.editForm.accumulationFund=row.accumulationFund;
                this.editForm.note=row.note;

            },

            //取消添加
            canceladd(){
                this.addForm={};
                this.addDialogVisible=false;
            },

            //添加
            addSecurity() {
                this.$refs.addFormRef.validate(valid=>{
                    if (valid) {
                        let url = this.$HRMSUrl+"/security/add";
                        this.$axios.post(url,this.addForm)
                            .then(res=>{
                                if (res.data.code == 200){
                                    this.addDialogVisible = false;
                                    this.addForm = {};
                                    this.getSecurityList();

                                }else {
                                    this.$message({
                                        type:"error",
                                        message:res.data.msg,
                                        duration:1000
                                    })
                                }
                            })
                    }else {
                        return false ;
                    }
                })

            },



            //删除
            removeById(id){
                // alert(id)
                let url = this.$HRMSUrl+"/security/del/"+id;
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete(url)
                        .then(res=>{
                            if (res.data.code == 200){
                                this.getSecurityList();
                            }else {
                                this.$message({
                                    type:"error",
                                    message:res.data.msg,
                                    duration:1000
                                })
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //初始化数据
            initEmployee() {
                let url = this.$HRMSUrl + "employee/list";
                this.$axios.get(url).then(res => {

                    if (res.data.code === 200) {
                        this.empList = res.data.data;
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.msg,
                            duration: 1000
                        })
                    }
                })
            },
            getSecurityList() {
                let url = this.$HRMSUrl+"/security/securityList";
                this.$axios.get(url,{
                    params:{
                        name:this.name,
                        now:this.pageNum,
                        size:this.pageSize
                    }
                }).then(res=>{
                    if (res.data.code == 200){
                        this.securityList = res.data.data.list;
                        this.pageNum = res.data.data.pageNum;
                        this.pageSize = res.data.data.pageSize;
                        this.total = res.data.data.total;
                    }else {
                        this.$message({
                            type:"error",
                            message:res.data.msg,
                            duration:1000
                        })
                    }
                })
            },
            initPosition(){
                let url = this.$HRMSUrl+"position/initPosition";
                this.$axios.get(url).then(res=>{
                    if (res.data.code === 200) {
                        this.jobList = res.data.data;
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.msg,
                            duration: 1000
                        })
                    }
                })
            },
            initDept(){
                let url = this.$HRMSUrl+"dept/listAllDept";
                this.$axios.get(url).then(res=>{
                    if (res.data.code === 200) {
                        this.deptList = res.data.data.list;
                        console.log(this.deptList)
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.msg,
                            duration: 1000
                        })
                    }
                })
            },
            searchScurity() {
                this.getSecurityList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getSecurityList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getSecurityList();
            },

        },


        created(){
            this.searchScurity();
            this.initDept();
            this.initPosition();
            this.initEmployee();
        }

    }
</script>

<style scoped>

</style>